﻿<!DOCTYPE html>
<html>
  <head>
    <title>练习8：动态面板嵌套与切换</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/练习8：动态面板嵌套与切换/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/练习8：动态面板嵌套与切换/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- 7 (动态面板) -->
      <div id="u361" class="ax_default" data-label="7">
        <div id="u361_state0" class="panel_state" data-label="State1" style="">
          <div id="u361_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u362" class="ax_default box_1">
              <img id="u362_img" class="img " src="images/index/u172.png"/>
            </div>

            <!-- Unnamed (图片 ) -->
            <div id="u363" class="ax_default image">
              <img id="u363_img" class="img " src="images/index/u173.png"/>
            </div>
          </div>
        </div>
      </div>

      <!-- 6 (动态面板) -->
      <div id="u364" class="ax_default" data-label="6">
        <div id="u364_state0" class="panel_state" data-label="State1" style="">
          <div id="u364_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u365" class="ax_default box_1">
              <img id="u365_img" class="img " src="images/index/u175.png"/>
            </div>

            <!-- 555 (组合 ) -->
            <div id="u366" class="ax_default" data-label="555" data-left="0" data-top="0" data-width="361" data-height="534">

              <!-- Unnamed (图片 ) -->
              <div id="u367" class="ax_default image">
                <img id="u367_img" class="img " src="images/index/u177.png"/>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u368" class="ax_default box_1" data-label="排名">
                <img id="u368_img" class="img " src="images/index/排名_u178.png"/>
                <div id="u368_text" class="text ">
                  <p><span>精选</span></p>
                </div>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u369" class="ax_default box_1" data-label="排名">
                <img id="u369_img" class="img " src="images/index/排名_u179.png"/>
                <div id="u369_text" class="text ">
                  <p><span>排行</span></p>
                </div>
              </div>

              <!-- 歌单 (矩形) -->
              <div id="u370" class="ax_default box_1" data-label="歌单">
                <img id="u370_img" class="img " src="images/index/歌单_u180.png"/>
                <div id="u370_text" class="text ">
                  <p><span>歌单</span></p>
                </div>
              </div>

              <!-- 电台 (矩形) -->
              <div id="u371" class="ax_default box_1" data-label="电台">
                <img id="u371_img" class="img " src="images/index/电台_u181.png"/>
                <div id="u371_text" class="text ">
                  <p><span>电台</span></p>
                </div>
              </div>

              <!-- MV (矩形) -->
              <div id="u372" class="ax_default box_1" data-label="MV">
                <img id="u372_img" class="img " src="images/index/mv_u182.png"/>
                <div id="u372_text" class="text ">
                  <p><span>MV</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 5 (动态面板) -->
      <div id="u373" class="ax_default" data-label="5">
        <div id="u373_state0" class="panel_state" data-label="State1" style="">
          <div id="u373_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u374" class="ax_default box_1">
              <img id="u374_img" class="img " src="images/index/u175.png"/>
            </div>

            <!-- 444 (组合 ) -->
            <div id="u375" class="ax_default" data-label="444" data-left="0" data-top="0" data-width="361" data-height="534">

              <!-- 排名 (矩形) -->
              <div id="u376" class="ax_default box_1" data-label="排名">
                <img id="u376_img" class="img " src="images/index/排名_u178.png"/>
                <div id="u376_text" class="text ">
                  <p><span>精选</span></p>
                </div>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u377" class="ax_default box_1" data-label="排名">
                <img id="u377_img" class="img " src="images/index/排名_u179.png"/>
                <div id="u377_text" class="text ">
                  <p><span>排行</span></p>
                </div>
              </div>

              <!-- 歌单 (矩形) -->
              <div id="u378" class="ax_default box_1" data-label="歌单">
                <img id="u378_img" class="img " src="images/index/歌单_u180.png"/>
                <div id="u378_text" class="text ">
                  <p><span>歌单</span></p>
                </div>
              </div>

              <!-- 电台 (矩形) -->
              <div id="u379" class="ax_default box_1" data-label="电台">
                <img id="u379_img" class="img " src="images/index/电台_u189.png"/>
                <div id="u379_text" class="text ">
                  <p><span>电台</span></p>
                </div>
              </div>

              <!-- MV (矩形) -->
              <div id="u380" class="ax_default box_1" data-label="MV">
                <img id="u380_img" class="img " src="images/index/mv_u190.png"/>
                <div id="u380_text" class="text ">
                  <p><span>MV</span></p>
                </div>
              </div>

              <!-- Unnamed (图片 ) -->
              <div id="u381" class="ax_default image">
                <img id="u381_img" class="img " src="images/index/u191.png"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 4 (动态面板) -->
      <div id="u382" class="ax_default" data-label="4">
        <div id="u382_state0" class="panel_state" data-label="State1" style="">
          <div id="u382_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u383" class="ax_default box_1">
              <img id="u383_img" class="img " src="images/index/u175.png"/>
            </div>

            <!-- 333 (组合 ) -->
            <div id="u384" class="ax_default" data-label="333" data-left="0" data-top="0" data-width="361" data-height="534">

              <!-- Unnamed (图片 ) -->
              <div id="u385" class="ax_default image">
                <img id="u385_img" class="img " src="images/index/u195.png"/>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u386" class="ax_default box_1" data-label="排名">
                <img id="u386_img" class="img " src="images/index/排名_u178.png"/>
                <div id="u386_text" class="text ">
                  <p><span>精选</span></p>
                </div>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u387" class="ax_default box_1" data-label="排名">
                <img id="u387_img" class="img " src="images/index/排名_u179.png"/>
                <div id="u387_text" class="text ">
                  <p><span>排行</span></p>
                </div>
              </div>

              <!-- 歌单 (矩形) -->
              <div id="u388" class="ax_default box_1" data-label="歌单">
                <img id="u388_img" class="img " src="images/index/歌单_u198.png"/>
                <div id="u388_text" class="text ">
                  <p><span>歌单</span></p>
                </div>
              </div>

              <!-- 电台 (矩形) -->
              <div id="u389" class="ax_default box_1" data-label="电台">
                <img id="u389_img" class="img " src="images/index/电台_u181.png"/>
                <div id="u389_text" class="text ">
                  <p><span>电台</span></p>
                </div>
              </div>

              <!-- MV (矩形) -->
              <div id="u390" class="ax_default box_1" data-label="MV">
                <img id="u390_img" class="img " src="images/index/mv_u190.png"/>
                <div id="u390_text" class="text ">
                  <p><span>MV</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3 (动态面板) -->
      <div id="u391" class="ax_default" data-label="3">
        <div id="u391_state0" class="panel_state" data-label="State1" style="">
          <div id="u391_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u392" class="ax_default box_1">
              <img id="u392_img" class="img " src="images/index/u175.png"/>
            </div>

            <!-- 222 (组合 ) -->
            <div id="u393" class="ax_default" data-label="222" data-left="0" data-top="0" data-width="361" data-height="533">

              <!-- Unnamed (图片 ) -->
              <div id="u394" class="ax_default image">
                <img id="u394_img" class="img " src="images/index/u204.png"/>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u395" class="ax_default box_1" data-label="排名">
                <img id="u395_img" class="img " src="images/index/排名_u178.png"/>
                <div id="u395_text" class="text ">
                  <p><span>精选</span></p>
                </div>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u396" class="ax_default box_1" data-label="排名">
                <img id="u396_img" class="img " src="images/index/电台_u189.png"/>
                <div id="u396_text" class="text ">
                  <p><span>排行</span></p>
                </div>
              </div>

              <!-- 歌单 (矩形) -->
              <div id="u397" class="ax_default box_1" data-label="歌单">
                <img id="u397_img" class="img " src="images/index/歌单_u180.png"/>
                <div id="u397_text" class="text ">
                  <p><span>歌单</span></p>
                </div>
              </div>

              <!-- 电台 (矩形) -->
              <div id="u398" class="ax_default box_1" data-label="电台">
                <img id="u398_img" class="img " src="images/index/电台_u181.png"/>
                <div id="u398_text" class="text ">
                  <p><span>电台</span></p>
                </div>
              </div>

              <!-- MV (矩形) -->
              <div id="u399" class="ax_default box_1" data-label="MV">
                <img id="u399_img" class="img " src="images/index/mv_u190.png"/>
                <div id="u399_text" class="text ">
                  <p><span>MV</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 2 (动态面板) -->
      <div id="u400" class="ax_default" data-label="2">
        <div id="u400_state0" class="panel_state" data-label="State1" style="">
          <div id="u400_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u401" class="ax_default box_1">
              <img id="u401_img" class="img " src="images/index/u175.png"/>
            </div>

            <!-- 111 (组合 ) -->
            <div id="u402" class="ax_default" data-label="111" data-left="0" data-top="0" data-width="361" data-height="534">

              <!-- Unnamed (图片 ) -->
              <div id="u403" class="ax_default image">
                <img id="u403_img" class="img " src="images/index/u213.png"/>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u404" class="ax_default box_1" data-label="排名">
                <img id="u404_img" class="img " src="images/index/排名_u214.png"/>
                <div id="u404_text" class="text ">
                  <p><span>精选</span></p>
                </div>
              </div>

              <!-- 排名 (矩形) -->
              <div id="u405" class="ax_default box_1" data-label="排名">
                <img id="u405_img" class="img " src="images/index/电台_u181.png"/>
                <div id="u405_text" class="text ">
                  <p><span>排行</span></p>
                </div>
              </div>

              <!-- 歌单 (矩形) -->
              <div id="u406" class="ax_default box_1" data-label="歌单">
                <img id="u406_img" class="img " src="images/index/歌单_u180.png"/>
                <div id="u406_text" class="text ">
                  <p><span>歌单</span></p>
                </div>
              </div>

              <!-- 电台 (矩形) -->
              <div id="u407" class="ax_default box_1" data-label="电台">
                <img id="u407_img" class="img " src="images/index/电台_u181.png"/>
                <div id="u407_text" class="text ">
                  <p><span>电台</span></p>
                </div>
              </div>

              <!-- MV (矩形) -->
              <div id="u408" class="ax_default box_1" data-label="MV">
                <img id="u408_img" class="img " src="images/index/mv_u190.png"/>
                <div id="u408_text" class="text ">
                  <p><span>MV</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 1 (动态面板) -->
      <div id="u409" class="ax_default" data-label="1">
        <div id="u409_state0" class="panel_state" data-label="State1" style="">
          <div id="u409_state0_content" class="panel_state_content">

            <!-- Unnamed (图片 ) -->
            <div id="u410" class="ax_default image">
              <img id="u410_img" class="img " src="images/index/u220.png"/>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u411" class="ax_default _一级标题">
        <img id="u411_img" class="img " src="images/index/u117.png"/>
        <div id="u411_text" class="text ">
          <p><span>练习8：动态面板嵌套与切换</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u412" class="ax_default box_1">
        <img id="u412_img" class="img " src="images/index/u222.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u413" class="ax_default icon">
        <img id="u413_img" class="img " src="images/index/u223.png"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u414" class="ax_default icon">
        <img id="u414_img" class="img " src="images/index/u224.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u415" class="ax_default label">
        <img id="u415_img" class="img " src="images/index/u225.png"/>
        <div id="u415_text" class="text ">
          <p><span>发现</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u416" class="ax_default label">
        <img id="u416_img" class="img " src="images/index/u226.png"/>
        <div id="u416_text" class="text ">
          <p><span>我的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u417" class="ax_default label">
        <img id="u417_img" class="img " src="images/index/u227.png"/>
        <div id="u417_text" class="text ">
          <p><span>音乐馆</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u418" class="ax_default box_1">
        <img id="u418_img" class="img " src="images/index/u228.png"/>
      </div>

      <!-- Unnamed (组合 ) -->
      <div id="u419" class="ax_default" data-left="185.254809471617" data-top="140.254809471617" data-width="27.8253175473055" data-height="22.04422863406">

        <!-- Unnamed (形状) -->
        <div id="u420" class="ax_default icon">
          <img id="u420_img" class="img " src="images/index/u230.png"/>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u421" class="ax_default icon">
          <img id="u421_img" class="img " src="images/index/u231.png"/>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u422" class="ax_default label">
        <img id="u422_img" class="img " src="images/index/u103.png"/>
        <div id="u422_text" class="text ">
          <p><span>搜索</span></p>
        </div>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u423" class="ax_default text_field ax_default_hidden" style="display:none; visibility: hidden">
        <input id="u423_input" type="text" value=""/>
      </div>
    </div>
  </body>
</html>
